<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>豆豆科技 - 客户合作</title>
		<link rel="stylesheet" href="./layui/css/layui.css">
		<link rel="stylesheet" href="./css/base.css">
		<link rel="stylesheet" href="./css/fullpage.css">
		<link rel="stylesheet" href="./css/swiper.min.css">
		<link rel="shortcut icon" type="image/x-icon" href="./img/favicon.ico" />
	</head>

	<body>
		<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
		<!--[if lt IE 9]>
		  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
		  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
		<![endif]-->
		<div class="layui-container">
			<div class="layui-row">
				<div class="layui-col-xs6">
					<div style="padding-left: 30%;">
						<img src="img/logo.png" height="60" />
					</div>
				</div>
				<div class="layui-col-xs6">
					<div class="grid-demo">
						<ul class="layui-nav">
							<li class="layui-nav-item">
								<a href="index.html">首页</a>
							</li>
							<li class="layui-nav-item">
								<a href="business.html">业务范围</a>
							</li>
							<li class="layui-nav-item">
								<a href="industry.html">行业资讯</a>
							</li>
							<li class="layui-nav-item layui-this">
								<a href="javascript:;">客户合作</a>
							</li>
							<li class="layui-nav-item">
								<a href="about.html">关于我们</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div class="customer-top">
			<div class="customer-top-bg">
				<img src="./img/customer1.png" width="100%">
			</div>
			<div class="customer-top-title">
				<p>尊贵私人定制</p>
				<hr />
				<p class="customer-message-title-en">豆豆科技倾力打造<br />为您定制独一无二的专属营销管理利器</p>
			</div>
			<div class="customer-top-desc">
				<div>
					<img src="img/customer2.png" width="100%" />
				</div>
				<div class="customer-top-desc-content">
					<div>
						<img src="img/customer3.png" />
					</div>
					<div>
						<p>领先的小程序定制技术</p>
						<hr />
						<p>1、申根SaaS领域10年，移动互联网领军企业</p>
						<p>2、资深信息技术与互联网研发运营团队，服务2000+客户。</p>
						<p>3、成熟完善的服务体系，为企业低成本、高效率定制专属软件程序。</p>
					</div>
				</div>
			</div>
		</div>
		<div class="customer-mid">
			<div>
				<img src="img/customer4.jpg" />
			</div>
			<div class="customer-mid-content">
				<div>
					<div class="customer-mid-content-top">签订合同</div>
					<div class="customer-mid-content-title">客户经理</div>
					<div class="customer-mid-content-body">
						<p>项目周期、项目价格服务条款、全程跟进把控品质与进度</p>
					</div>
				</div>
				<div>
					<div class="customer-mid-content-top">项目启动</div>
					<div class="customer-mid-content-title">项目团队</div>
					<div class="customer-mid-content-body">
						<p>根据项目需求，快速匹配的项目经、UI设计师、开发工程师等</p>
					</div>
				</div>
				<div>
					<div class="customer-mid-content-top">产品原型</div>
					<div class="customer-mid-content-title">产品经理</div>
					<div class="customer-mid-content-body">
						<p>规划产品原型图初稿，与客户沟通确认</p>
						<span>（客户确认）</span>
					</div>
				</div>
				<div>
					<div class="customer-mid-content-top">UI设计</div>
					<div class="customer-mid-content-title">UI设计师</div>
					<div class="customer-mid-content-body">
						<p>根据产品原型.设计效果图与客户沟通确认</p>
						<span>（客户确认）</span>
					</div>
				</div>
				<div>
					<div class="customer-mid-content-top">软件开发</div>
					<div class="customer-mid-content-title">开发工程师</div>
					<div class="customer-mid-content-body">
						<p>根据效果图进行项目开发，并根据测试反馈进行调整</p>
					</div>
				</div>
				<div>
					<div class="customer-mid-content-top">项目测试</div>
					<div class="customer-mid-content-title">测试工程师</div>
					<div class="customer-mid-content-body">
						<p>在各个相应阶段对项目进行测试，提供反馈意见给开发</p>
					</div>
				</div>
				<div>
					<div class="customer-mid-content-top">项目验收</div>
					<div class="customer-mid-content-title">项目经理</div>
					<div class="customer-mid-content-body">
						<p>根据产品原型设计效果图与客户沟通确认</p>
						<span>（客户确认）</span>
					</div>
				</div>
			</div>
		</div>
		<div class="customer-btm">
			<div class="customer-btm-title">填写资料，立即定制</div>
			<div class="customer-btm-form">
				<form class="layui-form">
					<div class="layui-form-item">
						<div class="layui-input-block typeList">
							<label class="layui-form-label">类型</label>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-input-block">
							<input type="text" lay-verify="title" autocomplete="off" placeholder="项目名称/企业名称" class="layui-input name">
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-input-block">
							<input type="text" lay-verify="title" autocomplete="off" placeholder="所属行业" class="layui-input industry">
						</div>
					</div>
					<div class="layui-form-item line-item">
						<div class="layui-input-block">
							<input type="text" autocomplete="off" placeholder="联系人" class="layui-input contact">
							<input type="text" autocomplete="off" placeholder="联系方式" class="layui-input phone">
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-input-block">
							<input type="text" lay-verify="title" autocomplete="off" placeholder="邮箱" class="layui-input email">
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-input-block">
							<textarea placeholder="需求描述（请详细描述你的需求，50-400字符）" class="layui-textarea content" maxlength="400"></textarea>
						</div>
					</div>
					<div class="layui-form-item" style="text-align: center;">
						<div class="layui-input-block">
							<button type="button" class="layui-btn layui-btn-normal submit">提交申请</button>
						</div>
					</div>
				</form>
			</div>
		</div>
		<div class="footer" style="bottom: auto;height: 25px;">
			<div class="infoot">
				<p>Copyright © 2020
					<a href="http://beian.miit.gov.cn/publish/query/indexFirst.action" target="_blank" rel="noopener noreferrer">
						鄂ICP备00000000号 </a>
				</p>
			</div>
		</div>
		<script src="./layui/layui.all.js"></script>
		<script src="./js/jquery.min.js"></script>
		<script src="./js/swiper.min.js"></script>
		<script src="./js/fullpage.js"></script>
		<script src="js/public.js"></script>
		<script>
			//由于模块都一次性加载，因此不用执行 layui.use() 来加载对应模块，直接使用即可：
			var layer = layui.layer,
				carousel = layui.carousel,
				form = layui.form;

			$(function() {
				$.ajax({
					type: "get",
					url: ip + "/api/type",
					dataType: 'json',
					async: true,
					success: function(res) {
						if(res.code == 200) {
							res.data.forEach((item, i) => {
								if(i == 0) {
									$('.typeList').append('<input type="radio" name="sex" value="' + item.id + '" title="' + item.name + '" checked="">');
								} else {
									$('.typeList').append('<input type="radio" name="sex" value="' + item.id + '" title="' + item.name + '" >');
								}
								form.render('radio');
							})
						} else {
							layer.msg(res.msg);
						}
					}
				});

				$('.submit').click(function() {
					$.ajax({
						type: "post",
						url: ip + "/api/order",
						data: {
							'contact': $('.contact').val(),
							'email': $('.email').val(),
							'industry': $('.industry').val(),
							'name': $('.name').val(),
							'phone': $('.phone').val(),
							'typeId': $('.typeList').find('input:checked').val(),
							'content':$('.content').val(),
						},
						dataType: 'json',
						async: true,
						success: function(res) {
							if(res.code == 200) {
								layer.msg(res.msg);
								$('.layui-form')[0].reset();
							} else {
								layer.msg(res.msg);
							}
						}
					});
				})
			});
		</script>
		<style>
			.customer-top {
				position: relative;
				top: -60px;
			}
			
			.customer-top-title {
				position: absolute;
				color: #FFFFFF;
				font-size: 48px;
				font-weight: 600;
				top: 25%;
				width: 1200px;
				left: 50%;
				transform: translateX(-50%);
			}
			
			.customer-top-title .customer-message-title-en {
				font-size: 24px;
				font-weight: 500;
				line-height: 40px;
			}
			
			.customer-top-title>hr {
				width: 40px;
				height: 2px;
				border-radius: 5px;
				margin: 20px 0 40px;
			}
			
			.customer-top-desc {
				position: relative;
			}
			
			.customer-top-desc-content {
				position: absolute;
				top: 50%;
				width: 1200px;
				margin: 0 auto;
				left: 50%;
				transform: translate(-50%, -50%);
			}
			
			.customer-top-desc-content>div:first-child {
				float: left;
			}
			
			.customer-top-desc-content>div:last-child {
				float: left;
				color: #666666;
				margin-top: 15%;
			}
			
			.customer-top-desc-content>div:last-child>p {
				line-height: 40px;
				font-size: 18px;
			}
			
			.customer-top-desc-content>div:last-child>p:first-child {
				font-weight: 600;
				font-size: 38px;
			}
			
			.customer-top-desc-content>div:last-child>hr {
				width: 40px;
				height: 2px;
				border-radius: 5px;
				margin: 10px 0 30px;
				background-color: #666666;
			}
			
			.customer-mid {
				text-align: center;
			}
			
			.customer-mid-content {
				padding: 100px 0;
			}
			
			.customer-mid-content>div {
				width: 130px;
				padding: 0 20px 20px;
				background: #e5f1ff;
				border-radius: 10px;
				position: relative;
				display: inline-block;
				vertical-align: top;
				margin-right: 15px;
			}
			
			.customer-mid-content>div:last-child {
				margin-right: 0;
			}
			
			.customer-mid-content>div .customer-mid-content-top {
				color: #FFFFFF;
				font-size: 18px;
				background: #6cb0fd;
				border-radius: 50px;
				padding: 5px 20px;
				position: relative;
				top: -17px;
			}
			
			.customer-mid-content>div .customer-mid-content-title {
				font-size: 18px;
				font-weight: 600;
				padding-bottom: 10px;
			}
			
			.customer-mid-content>div .customer-mid-content-body p {
				min-height: 57px;
			}
			
			.customer-mid-content>div .customer-mid-content-body span {
				color: #469afa;
				font-size: 12px;
				position: absolute;
				bottom: 5px;
				left: 50%;
				transform: translateX(-50%);
			}
			
			.customer-btm {
				height: 500px;
				background: #f5f5f5;
				padding: 40px;
			}
			
			.customer-btm-title {
				text-align: center;
				font-size: 38px;
				color: #666666;
				margin-bottom: 30px;
			}
			
			.customer-btm-form {
				width: 50%;
				margin: 0 auto;
				color: #666666;
			}
			
			.layui-form-label {
				text-align: left;
			}
			
			.layui-form-radio>i:hover,
			.layui-form-radioed>i {
				color: #666666;
			}
			
			.layui-form-radio>i {
				font-size: 16px;
			}
			
			.layui-form-radio {
				margin-right: 50px;
			}
			
			.line-item .layui-input-block {
				display: flex;
			}
			
			.line-item input {
				flex: 1;
				margin-right: 10px;
			}
			
			.line-item input:last-child {
				margin-right: 0;
			}
			
			.layui-btn-normal {
				margin-top: 20px;
				padding: 0 30px;
				border-radius: 50px;
				background: #44b8f6;
			}
		</style>
	</body>

</html>